<template>
  <el-container class="login-one">
    <el-header>
    </el-header>
    <el-main>
      <br> <br> <br> <br>
      <el-row>
        <el-col :span="8">&nbsp;
        </el-col>
        <el-col :span="8" style="background-color: white;border-radius: 30px;">
          <div v-show="showSms">
            <el-form :model="userInfo" label-width="80px">
              <br><br>
              <h1 align="center">企业考勤管理系统</h1>
              <br><br>

              <el-form-item label="手机">
                <el-col :span="20">
                  <el-input v-model="userInfo.phone"></el-input>
                </el-col>
              </el-form-item>

              <el-form-item label="验证码">
                <el-col :span="20">
                  <el-input v-model="userInfo.code"></el-input>
                </el-col>
              </el-form-item>

              <el-form-item>
                <el-button type="success" icon="el-icon-user-solid" size="mini" @click="change(1)">账号登录</el-button>
                <el-button type="success" icon="el-icon-user-solid" size="mini" @click="smsLogin">登录</el-button>
                <el-button type="success" icon="el-icon-user-solid" size="mini" :disabled="isDisabled"
                  @click="sendCode">发送验证码{{num}}</el-button>
              </el-form-item>
            </el-form>
          </div>

          <!-- 账号登录-->
          <div v-show="showAccount">
            <br>
            <h1 align="center">企业考勤管理系统</h1>
            <br><br>

            <el-form :model="userInfo" label-width="80px">

              <el-form-item label="用户名">
                <el-col :span="20">
                  <el-input placeholder="请输入用户名" v-model="userInfo.userName"></el-input>
                </el-col>
              </el-form-item>

              <el-form-item label="密码">
                <el-col :span="20">
                  <el-input placeholder="请输入密码" v-model="userInfo.userPwd" show-password></el-input>
                </el-col>
              </el-form-item>

              <el-form-item>
                <input type="checkbox" @click="remember">记住密码
              </el-form-item>

              <el-form-item>
                <el-button type="success" icon="el-icon-user-solid" size="mini" @click="change(0)">短信登录</el-button>
                <el-button type="success" icon="el-icon-user-solid" size="mini" @click="login">登录</el-button>
              </el-form-item>

            </el-form>
          </div>
        </el-col>
        <el-col :span="8">&nbsp;</el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
  export default {
    name: "login",
    data() {
      return {
        showSms: false,
        showAccount: true,
        userInfo: {
          userId: 0,
          userNum: "",
          userName: "",
          userPwd: "",
          sex: "",
          phone: "",
          email: "",
          departmentId: 0,
          salt: "",
          roleId: 0,
          code: "",
        },
        isDisabled: false, //控制发送验证码
        num: "" //倒计时
      }
    },
    methods: {
      sendCode() { //发送验证码
        //禁用发送
        //把vue对象赋值给变量
        var self = this;
        this.$http.post("/sms/send", this.$qs.stringify(this.userInfo))
          .then(function(rs) {
            self.$message(rs.data.info);
            if (rs.data.success) {
              self.isDisabled = true;
              self.num = 60;
              //倒计时
              var i = setInterval(function() {
                self.num--;
                if (self.num == 0) {
                  //启用发送按钮
                  self.num = "";
                  self.isDisabled = false
                  //清除计时器
                  clearInterval(i);
                }
              }, 1000)
            }
          })
      },
      login() {
        var self = this;
        if (self.userInfo.userName == null || self.userInfo.userName == "") {
          self.$message("账号或密码不能为空！");
        }
        console.log(this.userInfo);
        this.$http.post(
            "http://localhost:8080/login/userLogin",
            this.$qs.stringify(this.userInfo))
          .then(function(rs) {
            self.$message(rs.data.info);
            if (rs.data.success) {
              console.log(rs.data.data);
              self.userInfo = rs.data.data;
              console.log(self.userInfo);
              //存入姓名
              sessionStorage.setItem("name", self.userInfo.userName);
              sessionStorage.setItem("userId", self.userInfo.userId);
              sessionStorage.setItem("departmentId", self.userInfo.departmentId);
              //把对象转换成字符串
              var user = JSON.stringify(self.userInfo);
              //存入user对象
              sessionStorage.setItem("user", user);
              self.$router.replace("/index");
            }
          })
      },
      smsLogin() {
        var self = this;
        this.$http.post("/login/smsLogin", this.$qs.stringify(this.userInfo))
          .then(function(rs) {
            self.$message(rs.data.info);
            if (rs.data.success) {
              //调转到系统主页面
              self.$router.replace("/index");
            }
          })
      },
      change(num) {
        if (num == 1) {
          this.showAccount = true;
          this.showSms = false;
        } else {
          this.showAccount = false;
          this.showSms = true;
        }
      },
      //记住账号
      remember() {
        //获取选中状态
        var is = $("input[type='checkbox']").prop("checked");
        console.log(is);
        if (is) {
          //把账号和密码存入localStorage
          var user = JSON.stringify(this.userInfo);
          localStorage.setItem("u", user)
        } else {
          //删除localStorage
          localStorage.removeItem("u");
        }
      },
      mounted() {
        //取出账号信息
        var u = localStorage.getItem("u");
        if (u != null) {
          //设置记住的选中状态
          $("input[type='checkbox']").prop("checked", true);
          var uu = JSON.parse(u);
          //赋值给userInfo
          this.userInfo.userName = uu.userName;
          this.userInfo.userPwd = uu.userPwd;
        } else {}
      }
    }
  }
</script>

<style>
  html,
  body {
    margin: 0px;
    height: 100%;
  }

  .login-one {
    background-color: #1c77ac;
    background-image: url(../../assets/light.png);
    background-repeat: no-repeat;
    overflow: hidden;
    height: 100%;
  }
</style>
